<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box">

    <CommonDateSearch v-show="currentTab !== 'detail'" ref="searchRef" @search="handleSearch"></CommonDateSearch>
    <!-- 到处 -->
    <div class="content-box">
      <div class="tab">
        <a-radio-group v-model:value="currentTab" button-style="solid" @change="changeRadio">
          <a-radio-button value="detail">能源消耗明细</a-radio-button>
          <a-radio-button value="distribution">能源消耗分布</a-radio-button>
        </a-radio-group>
        <div>
          <a-select v-if="currentTab !== 'detail'" style="width: 185px;margin-right: 18px;" @change="changeOptions"
            :options="options" v-model:value="distributionTab" :disabled="currentTab === 'detail'"
            :default-value="options[0].value" :getPopupContainer="(triggerNode) => triggerNode.parentNode"></a-select>
          <a-button type="primary" v-if="currentTab !== 'detail'" @click="handleExport"
            :loading="exportLoading">导出</a-button>
          <!-- <a-button type="primary" v-else @click="handleExport2" :loading="exportLoading">导sss出</a-button> -->
        </div>

      </div>
      <div class="tab-content">
        <template v-if="currentTab === 'detail'">

          <Detail style="height: max-content;" />
          <Detail2 />
        </template>
        <template v-else>

          <template v-for="item in options" :key="item.value">
            <component :is="item.componentName" :label="item.label" :searchInfo="searchInfo"
              v-if="item.value === distributionTab">
            </component>
          </template>
        </template>
      </div>
    </div>
  </PageWrapper>
</template>
<script setup>
import Line from '@/components/Charts/Line/index.vue'
import Pie from '@/components/Charts/Pie/index.vue'
import { getTotalLineData, getTypeLineData, getBarData } from '@/api/carbon/calc'
import { ref, onMounted, reactive } from 'vue'
import dayjs from 'dayjs'
import { PageWrapper } from '@/components/Page'
import CommonDateSearch from '@/components/CommonDateSearch/index.vue'
import Icon from '@/components/Icon/Icon.vue'
// import { options } from './data'
import Detail from './Detail.vue'
import Detail2 from './Detail2.vue'
import ColdAndHeatSources from './ColdAndHeatSources.vue'
import HotWaterAndSecondaryPump from './HotWaterAndSecondaryPump.vue'
import WaterSourceHeatPump from './WaterSourceHeatPump.vue'
import MediumTemperatureHeatRecovery from './MediumTemperatureHeatRecovery.vue'
import MediumTemperatureChilledWater from './MediumTemperatureChilledWater.vue'
import LowTemperatureChilledWater from './LowTemperatureChilledWater.vue'
import Exhuaust from './Exhuaust.vue'
import Mau from './Mau.vue'
import { GeneralExportData } from '@/api/common/chart.ts'
import {
  downloadByData,
} from '@/utils/file/download';

defineOptions({ name: 'Consume' })
const options = [
  { label: '低温', value: 1, componentName: LowTemperatureChilledWater, dictCode: "energy_consumption_of_low_temperature_chilled_water_system" },
  { label: '中温', value: 2, componentName: MediumTemperatureChilledWater, dictCode: "energy_consumption_of_medium_temperature_chilled_water_system" },
  { label: '热回收', value: 3, componentName: MediumTemperatureHeatRecovery, dictCode: "energy_consumption_of_medium_temperature_chilled_water_system" },
  { label: '热水', value: 5, componentName: HotWaterAndSecondaryPump, dictCode: 'energy_consumption_of_medium_temperature_heat_recovery_system' },
  { label: '水源热泵', value: 4, componentName: WaterSourceHeatPump, dictCode: 'energy_consumption_of_water_source_heat_pump' },
  // { label: '冷热源', value: 17, componentName: ColdAndHeatSources },
  { label: 'TOX', value: 6, componentName: Mau, dictCode: 'energy_consumption_of_tox_system' },
  { label: 'VOC', value: 7, componentName: Mau, dictCode: 'energy_consumption_of_voc_system' },
  { label: 'AEX', value: 8, componentName: Mau, dictCode: 'energy_consumption_of_aex_system' },
  { label: 'SCX', value: 9, componentName: Mau, dictCode: 'energy_consumption_of_scx_system' },
  { label: 'FFU', value: 10, componentName: Mau, dictCode: 'energy_consumption_of_ffu_system' },
  { label: 'PCW', value: 11, componentName: Mau, dictCode: 'energy_consumption_of_pcw_system' },
  { label: 'PGEX', value: 12, componentName: Mau, dictCode: 'energy_consumption_of_pgex_system' },
  { label: 'MAU', value: 13, componentName: Mau, dictCode: 'energy_consumption_of_mau_system' },
  { label: 'AHU', value: 14, componentName: Mau, dictCode: 'energy_consumption_of_ahu_system' },
  //{ label: 'GEX', value: 15, componentName: Mau, dictCode: 'energy_consumption_of_gex_system' },
  { label: '其他', value: 16, componentName: Mau, dictCode: 'energy_consumption_of_other_system' },
  { label: '化学品', value: 17, componentName: Mau, dictCode: 'energy_consumption_of_chemical_system' },
  { label: 'POU', value: 18, componentName: Mau, dictCode: 'energy_consumption_of_pou_system' }

]
const searchRef = ref()

const searchInfo = ref()

const currentTab = ref('detail')

const distributionTab = ref(1)
const exportLoading = ref(false)
onMounted(() => {
  // searchRef.value.handleSearch()
})

const changeRadio = (params) => {
  if (params.target.value == 'distribution') {
  } else {
    searchRef.value.handleSearch()
  }
}
const handleSearch = (params) => {
  console.log(params, "?Asd");

  searchInfo.value = params
  changeOptions()

}
const handleExport = async () => {

  exportLoading.value = true
  const { data, headers } = await GeneralExportData(searchInfo.value)
  let contentDisposition = decodeURIComponent(headers["content-disposition"]);
  const filenameMatch = contentDisposition.match(/filename\*=UTF-8''(.+)|filename="(.+)"|filename=(.+)/)
  const fileName = filenameMatch[1] || filenameMatch[2] || filenameMatch[3]
  downloadByData(data, fileName);
  exportLoading.value = false
  message.success("导出成功");
}


const changeOptions = (val) => {
  options.forEach(item => {
    if (item.value == distributionTab.value) {
      searchInfo.value.dictCode = item.dictCode
      searchInfo.value.itemName = item.label
      // console.log(item.componentName.name,"name");

    }

  })

}
</script>
<style scoped lang="scss">
.content-box {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: #fff;

  .tab {
    display: flex;
    justify-content: space-between;
    padding: 8px;
  }

  .tab-content {
    /* flex: 1; */
    height: 100%;
    overflow: auto;
  }
}
</style>
